<template>
    <div class="container">
<<<<<<< HEAD
        <van-notify v-model="show1" type="success">
            <van-icon name="success" style="margin-right: 4px;"/>
            <span>提交成功</span>
        </van-notify>
=======
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        <div class="repaire-box" id="repaire-container">
            <div class="title">
                用户报修
            </div>
            <div class="repaire-input">
                <label>姓名：</label>
                <input type="text" v-model="repaire.u_id" placeholder="请输入姓名"/>
            </div>
            <div class="repaire-input">
                <label>联系电话：</label>
<<<<<<< HEAD
                <input disabled type="text" placeholder="请输入联系电话"/>
            </div>
            <div class="repaire-select">
                <label>故障类别：</label>
                <select name="repairetypes" v-model="repaire.type_id">
=======
                <input type="text" placeholder="请输入联系电话"/>
            </div>
            <div class="repaire-select">
                <label>故障类别：</label>
                <select name="repairetypes"  v-model="repaire.type_id">
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
                    <!--<option selected>请选择</option>-->
                    <option v-for="list in repairetypes" :value="list.value">{{list.name}}</option>
                </select>

            </div>
<<<<<<< HEAD
            <div class="repaire-select">
                <label>报修地点：</label>
                <select disabled>
                    <option>请选择</option>
                    <option value="1" v-model="repaire.type_id">三单元一号楼</option>
=======
            <!-- <div class="repaire-select">
                <label>报修地点：</label>
                <select>
                    <option>请选择</option>
                    <option value="1" v-model="repaire.type_id">电气维修</option>
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
                    <option value="2" v-model="repaire.type_id">水暖</option>
                    <option value="3" v-model="repaire.type_id">车辆管理</option>
                    <option value="4" v-model="repaire.type_id">其它</option>
                </select>

<<<<<<< HEAD
            </div>

            <div class="repaire-input">
                <label>门牌号：</label>
                <input type="text" v-model="repaire.address" placeholder="请输入门牌号"/>
=======
            </div> -->

            <div class="repaire-input">
                <label>住址</label>
                <input type="text" v-model="repaire.address" placeholder="请输入住址"/>
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
            </div>
            <div class="repaire-input">
                <label>故障描述：</label>
                <input type="text" v-model="repaire.repaire_desc" placeholder="请进行故障描述"/>
            </div>
            <div class="repaire-input">
                <label>预约时间：</label>
<<<<<<< HEAD
                <input disabled type="date"/>
            </div>
            <div class="repaire-input">
                <label>故障图片：</label>
                <input disabled type="image"/>
            </div>
=======
                <input type="date"/>
            </div>
            <!-- <div class="repaire-input">
                <label>故障图片：</label>
                <input type="image" disabled/>
            </div> -->
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36

            <div class="repaire-button">
                <button @click.prevent="submitRepaire">提交</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
<<<<<<< HEAD
        data() {
            return {
                repaire: {
                    type_id: '',
                    u_id: '',
                    repaire_desc: '',
                    repaire_status: '',
                    address: ''

                },
                repairetypes: [
                    {name: '电气维修', value: '1'},
                    {name: '水暖', value: '2'},
                    {name: '车辆管理', value: '3'},
                    {name: '其它', value: '4'}
                ],
                show1: false
            }
        },
        methods: {
            showNotify() {
                this.show1 = true;
                setTimeout(() => {
                    this.show1 = false;
                }, 2000);
            },
            submitRepaire() {
                axios.post("/safty/repaire/addRepaire", this.repaire)
                    .then((res) => {
                        console.log(res);
                        if (res.success) {
                            console.log(res.data);
                            this.showNotify();
                            this.repaire.type_id = '',
                            this.repaire.u_id = '',
                            this.repaire.repaire_desc = '',
                            this.repaire.repaire_status = '',
                            this.repaire.address = ''
                        }
                    })
                    .catch((err) => {
=======
        data(){
            return{
                repaire:{
                    type_id:'',
                    u_id:'',
                    repaire_desc:'',
                    repaire_status:'',
                    address:''

                },
                repairetypes:[
                    {name:'请选择',value:'0'},
                    {name:'电气维修',value:'1'},
                    {name:'水暖',value:'2'},
                    {name:'车辆管理',value:'3'},
                    {name:'其它',value:'4'}
                ]
            }
        },
        methods:{
            submitRepaire(){
                console.log(this.repaire);
                axios.post("/safty/repaire/addRepaire",this.repaire)
                    .then((res)=>{
                        console.log(res);
                        if(res.success){
                            console.log(res.data);

                        }
                    })
                    .catch((err)=>{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
                        console.log(err)
                    })
            }
        }
    }
</script>

<style scoped>
<<<<<<< HEAD
    .container {
=======
    .container{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /*background-color: lightskyblue;*/
    }
<<<<<<< HEAD

    .repaire-box {

    }

    .title {
=======
    .repaire-box{

    }
    .title{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        font-size: 20px;
        font-family: "eras light itc";
        font-weight: bold;
        color: #2c3e50;
        letter-spacing: 15px;
        text-shadow: 3px 2px 3px #F7F7F7;
        margin: 20px 0;
    }
<<<<<<< HEAD

    .repaire-input {
=======
    .repaire-input{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        position: relative;
        width: 350px;
        height: 35px;
        color: #343A40;
        margin: 13px 0;
        background-color: #F7F7F7;
        border-radius: 5px;
    }
<<<<<<< HEAD

    .repaire-input > label {
=======
    .repaire-input>label{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        /*box-sizing: border-box;*/
        /*position: absolute;*/
        width: 90px;
        float: left;
        border: 0px solid red;
        height: 35px;
        line-height: 35px;
        letter-spacing: 2px;
        padding-left: 10px;
        font-size: 15px;
        /*color: #666666;*/
    }
<<<<<<< HEAD

    /*.repaire-input>label:active{*/
    /*!*点击或者在框中输入时，去掉label中的字*!*/
    /*}*/
    .repaire-input > input {
=======
    /*.repaire-input>label:active{*/
        /*!*点击或者在框中输入时，去掉label中的字*!*/
    /*}*/
    .repaire-input>input{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        float: left;;
        position: absolute;
        box-sizing: border-box;
        border-radius: 4px;
        border: 0px solid red;
        /*padding-left: 60px;*/
        margin-left: -130px;
        outline: none;
        font-size: 14px;
        width: 170px;
        height: 100%;
        background-color: #F7F7F7;
    }
<<<<<<< HEAD

    .repaire-select {
=======
    .repaire-select{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        color: #343A40;
        margin: 10px 0;

    }
<<<<<<< HEAD

    .repaire-select > label {
=======
    .repaire-select>label{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        display: flow;
        letter-spacing: 2px;
        padding-left: 0px;
        color: #666666;
        margin-bottom: 10px;
        font-size: 15px;
    }
<<<<<<< HEAD

    .repaire-select > select {
=======
    .repaire-select>select{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        display: inline;
        padding: 5px 45px 10px 40px;
        /*border: 1px solid #DDDDDD;*/
        border-radius: 6px;
        background-color: #F7F7F7;
    }

    /*.repaire-select>option{*/
<<<<<<< HEAD
    /*border: 1px solid #DDDDDD;*/
    /*border-radius: 6px;*/
    /*}*/
    .repaire-button {
=======
        /*border: 1px solid #DDDDDD;*/
        /*border-radius: 6px;*/
    /*}*/
    .repaire-button{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        position: relative;
        width: 100%;
        height: 50px;
        margin: 50px 0;
    }
<<<<<<< HEAD

    .repaire-button > button {
=======
    .repaire-button>button{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        border: 0;
        width: 100%;
        height: 30px;
        border-radius: 6px;
        border: 1px solid #DDDDDD;
        outline: none;
        background-color: #DDDDDD;
        /*background-color: rgba(47,79,79,0.5);*/
        letter-spacing: 15px;
        padding-left: 15px;
        color: #666666;
        font-size: 16px;
    }
<<<<<<< HEAD

    .repaire-button > button:hover {
        cursor: pointer;
        font-size: 20px;
    }

    .repaire-button > button:active {
=======
    .repaire-button>button:hover{
        cursor: pointer;
        font-size: 20px;
    }
    .repaire-button>button:active{
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
        background-color: #63a35c;
        font-weight: bold;
        outline: none;
        border: 0;
        box-shadow: 0px 0px 8px 1px #7088FF;
    }
</style>